//加载模块
layui.use(function () { //亦可加载特定模块：layui.use(['layer', 'laydate', function(){
    //得到各种内置组件
    var layer = layui.layer //弹层
        , laypage = layui.laypage //分页
        , table = layui.table //表格
        , element = layui.element //元素操作
        , dropdown = layui.dropdown //下拉菜单
    //向世界问个好
    layer.msg('稍等！更新一下');

    //监听Tab切换
    element.on('tab(demo)', function (data) {
        layer.tips('切换了 ' + data.index + '：' + this.innerHTML, this, {
            tips: 1
        });
    });
    // $(function () {
    //     console.log(id)
    //     $.post(`http://localhost:8088/dev/gedanzhuye/gequ/${id}`,function(result){
    //         console.log(result.data)
    //         let ar= result.data
    //         console.log(ar)
    //     })
    //
    // })




    //执行一个 table 实例
    table.render({
        elem: '#demo'
        , limit: 4
        , limits: [4, 8, 12, 16]
        , height: 420
        // , url: `http://localhost:8088/dev/gedanzhuye/gequ?id=${id}`,//数据接口
        , url: `http://localhost:8088/dev/gedanzhuye/gequ?id=${id}`,//数据接口
        type: "post"
        // ,url: '../demo/table/user/-page=1&limit=20.js' //数据接口
        , title: '歌曲列表'
        , page: false //开启分页
        , totalRow: false //开启合计行
        , cols: [[ //表头
            {type: 'checkbox', fixed: 'left'}
            , {field: 'id', title: '序号', width: 90, sort: true, fixed: 'left', totalRowText: '合计：'}
            , {
                field: 'songTitle', title: '歌曲名称', width: 170, templet: function (b) {
                    return `<a href="http://localhost:8088/dev/views/ccw/lyric.html?name=${b.songTitle}">${b.songTitle}</a>`
                    //    另外一个页面接受参数的方式
                    //    console.log(layui.router().search.name,decodeURI(layui.router().search.name))
                    //
                    // console.log(layui.router().search.date,decodeURI(layui.router().search.date))
                }
            }
            , {field: 'singerName', title: '歌手名称', width: 160, totalRow: true,templet: function (g){
                return `<a href="http://localhost:8088/dev/views/czn/views/Introduction.html?singerName=${g.singerName}">${g.singerName}</a>`
                }}
            , {field: 'clicks', title: '点赞次数', width: 130, sort: true}
            , {fixed: 'right',title:'播放', width: 150, align: 'center', toolbar: '#barDemo'}
        ]],
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports']
    });

    //监听头工具栏事件
    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {

            case 'play':
                var data=obj.data

                layer.msg('请先选择一个');
                break;
        }
        ;
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"

        var data = obj.data //获得当前行数据

            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'playi') {
            window.location.href="/dev/views/cxy/bofang.html?id="+data.id+""
            // window.location.href="/dev/views/cxy/gctb.html?id="+data.id+""
        } else if (layEvent === 'playon') {

        }
    });


    //分页
    laypage.render({
        elem: 'pageDemo' //分页容器的id
        , count: 1000 //数据总数
        , limit: 4 //每页显示的数据条数
        , skin: '#1E9FFF' //自定义选中色值
        //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
        , jump: function (obj, first) {
            if (!first) {
                layer.msg('第' + obj.curr + '页', {offset: 'b'});
            }
        }
    });

});